<template>
  <view class="successPay">
    <view class="successPay-box">
      <view class="successPay-img">
        <image :src="imageUrl + '/static/home/success.png'" mode="widthFix" />
      </view>
      <view class="successPay-text">支付成功</view>
    </view>
    <view class="successPay-btn-box">
      <view class="successPay-btn" @click="goOrder">查看订单</view>
      <view class="successPay-btn" @click="goHome">返回首页</view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      imageUrl: "",
    };
  },

  mounted() {},

  methods: {
    goOrder() {},
    goHome() {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.successPay {
  width: 100%;
  height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .successPay-box {
    width: 100%;
    display: flex;
    margin-top: 30vh;
    flex-direction: column;
    align-items: center;
    .successPay-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #06bf5e;
      position: relative;
      image {
        width: 60rpx;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
  .successPay-btn-box{
    margin-top: 60rpx;
    .successPay-btn{
    width: 300rpx;
    padding: 18rpx 0;
    color: #fff;
    text-align: center;
    border-radius: 50rpx;
    background-color: #df4647;
    font-size: 28rpx;
    margin: 20rpx 0;
  }
  .successPay-btn:last-child {
    border: 1px solid #999;
    background: none;
    color: #333;
  }
  }
  
}
</style>